<!-- 实习经验 -->
<template>
  <div>
    <el-tabs v-model="activeName" type="border-card" class="demo-tabs">
      <el-tab-pane label="样式设置" name="first">
        <CommonTitleOptions></CommonTitleOptions>
        <!-- 公共部分 -->
        <Common></Common>
      </el-tab-pane>
      <!-- 数据配置 -->
      <el-tab-pane label="数据配置" name="second">
        <el-form label-width="70px" label-position="left">
          <el-form-item label="标题名称:">
            <el-input
              v-model="modelItem.data.title"
              type="text"
              maxlength="15"
              show-word-limit
            />
          </el-form-item>
          <div
            v-for="(item, index) in modelItem.data.LIST"
            :key="index"
            class="campus-list"
          >
            <p>
              <span>实习经验{{ index + 1 }}</span>
              <el-button
                :disabled="index === 0"
                type="danger"
                :icon="Delete"
                circle
                @click="deleteCampus(index)"
              />
            </p>
            <el-form-item label="日期选择:">
              <el-date-picker
                v-model="item.date"
                type="monthrange"
                range-separator="-"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
              />
              <el-switch v-model="modelItem.data.isShow.date" />
            </el-form-item>
            <el-form-item label="公司名称:">
              <el-input
                v-model="item.companyName"
                type="text"
                maxlength="35"
                show-word-limit
              />
              <el-switch v-model="modelItem.data.isShow.companyName" />
            </el-form-item>
            <el-form-item label="主要职责:">
              <el-input
                v-model="item.posts"
                type="text"
                maxlength="35"
                show-word-limit
              />
              <el-switch v-model="modelItem.data.isShow.posts" />
            </el-form-item>
            <el-form-item
              v-for="(content, cIndex) in item.jobContent"
              :key="cIndex"
              label="工作内容:"
            >
              <el-input
                v-model="content.content"
                type="textarea"
                maxlength="200"
                show-word-limit
                :rows="3"
              />
              <el-button
                type="danger"
                :icon="SemiSelect"
                circle
                @click="deleteContent(index, cIndex)"
              />
              <el-button
                :disabled="cIndex !== item.jobContent.length - 1"
                type="primary"
                :icon="Plus"
                circle
                @click="addContent(index)"
              />
            </el-form-item>
          </div>
          <!-- 添加或删除经历 -->
          <div class="addOrdelet">
            <el-button type="primary" @click="addCampus">添加经历</el-button>
          </div>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Delete, SemiSelect, Plus } from '@element-plus/icons-vue'
import CommonTitleOptions from '@/options/CommonTitleOptions.vue'
import Common from '@/options/Common.vue'
const activeName = ref('first')
import selectModelItem from '@/hooks/selectModel.ts' //当前选中模块
const modelItem = selectModelItem()

/**
 * 数据配置
 */
// 删除技能
const deleteCampus = (index: number): void => {
  modelItem.data.LIST.splice(index, 1)
}
// 添加经验
const addCampus = (): void => {
  modelItem.data.LIST.push({
    date: ['2021-9', '2022-10'], // 实习时间
    companyName: '业绩公司', // 公司名称
    posts: '前端开发工程师', // 职位
    jobContent: [
      {
        content: '主要工作内容是打杂',
      },
      {
        content:
          '主要工作内容是打杂主要工作内容是打杂主要工作内容是打杂主要工作内容是打杂主要工作内容是打杂',
      },
      {
        content: '主要工作内容是打杂',
      },
    ],
  })
}
// 添加实习内容
const addContent = (index: number): void => {
  modelItem.data.LIST[index].jobContent.push({
    content: '主要工作内容是打杂',
  })
}
// 删除内容
const deleteContent = (index: number, cIndex: number): void => {
  modelItem.data.LIST[index].jobContent.splice(cIndex, 1)
}
</script>
<style lang="scss" scoped>
.campus-list {
  p {
    display: flex;
    justify-content: center;
    height: 50px;
    align-items: center;
    margin-bottom: 10px;

    span {
      margin-right: 10px;
    }
  }

  .el-button {
    margin-left: 10px;
  }
}

:deep(.el-input) {
  width: 80%;
  height: 27px;
  line-height: 27px;
  margin-right: 2px;
}

:deep(.el-form-item__label) {
  font-size: 13px;
}

:deep(.el-tabs--border-card) {
  border: 0;
}

/* 日期选择器 */
:deep(.el-range-editor.el-input__wrapper) {
  width: 200px;
}
</style>
